<template>
	<transition :name="transitionName" @enter="handleEnter" @leave="handleLeave" appear>
		<div :class="classes" :style="styles">
			<template v-if="type === 'notice'">
				<div :class="contentClasses" ref="content" v-html="content"></div>
				<div :class="contentWithIcon">
					<render-cell :render="renderFunc"></render-cell>
				</div>
				<a :class="[baseClass + '-close']" @click="close" v-if="closable">
					<i class="ivu-icon ivu-icon-ios-close"></i>
				</a>
			</template>
			<template v-if="type === 'message'">
				<div :class="messageContentClasses" ref="content">
					<div :class="[baseClass + '-content-text']" v-html="content"></div>
					<div :class="[baseClass + '-content-text']">
						<render-cell :render="renderFunc"></render-cell>
					</div>
					<a :class="[baseClass + '-close']" @click="close" v-if="closable">
						<i class="ivu-icon ivu-icon-ios-close"></i>
					</a>
				</div>
			</template>
		</div>
	</transition>
</template>
<script lang="ts">
	import Anes from "../base";
	import { Prop, Emit, Component } from "vue-property-decorator";
	import RenderCell from "./renderCell";
	@Component({
		components: { RenderCell }
	})
	export default class Notice extends Anes {
		@Prop({ type: String, default: "" }) prefixCls!: string;
		@Prop({ type: String, default: "" }) content!: string;
		@Prop() type!: string;
		@Prop() className!: string;
		@Prop() transitionName!: string;
		@Prop() msgType!: string;
		@Prop({ type: String, default: "", required: true }) name!: string;

		@Prop({ type: Number, default: 1.5 }) duration!: number;

		@Prop({ type: Boolean, default: false }) closable!: boolean;
		@Prop({ type: Boolean, default: false }) background!: boolean;
		@Prop() withIcon!: boolean;
		@Prop() hasTitle!: boolean;

		@Prop() render!: Function;
		@Prop() onClose!: Function;

		@Prop({
			type: Object,
			default() {
				return { right: "50%" };
			}
		})
		styles!: object;

		withDesc = false;
		closeTimer?: number | null;
		get baseClass() {
			return `${this.prefixCls}-notice`;
		}
		get renderFunc() {
			return this.render; //|| function() {};
		}
		get classes() {
			return [
				this.baseClass,
				{
					[`${this.className}`]: !!this.className,
					[`${this.baseClass}-closable`]: this.closable,
					[`${this.baseClass}-with-desc`]: this.withDesc,
					[`${this.baseClass}-with-background`]: this.background
				}
			];
		}
		get contentClasses() {
			return [
				`${this.baseClass}-content`,
				this.render !== undefined ? `${this.baseClass}-content-with-render` : ""
			];
		}
		get messageContentClasses() {
			return [
				`${this.baseClass}-content`,
				{
					[`${this.baseClass}-content-${this.msgType}`]: this.msgType,
					[`${this.baseClass}-content-background`]: this.background
				}
			];
		}
		get contentWithIcon() {
			return [
				this.withIcon ? `${this.prefixCls}-content-with-icon` : "",
				!this.hasTitle && this.withIcon
					? `${this.prefixCls}-content-with-render-notitle`
					: ""
			];
		}
		get messageClasses() {
			return [
				`${this.baseClass}-content`,
				this.render !== undefined ? `${this.baseClass}-content-with-render` : ""
			];
		}

		clearCloseTimer() {
			if (this.closeTimer) {
				clearTimeout(this.closeTimer);
				this.closeTimer = null;
			}
		}
		close() {
			this.clearCloseTimer();
			if (this.onClose) this.onClose();
			(this.$parent as any).close(this.name);
		}
		handleEnter(el: HTMLElement) {
			if (this.type === "message") {
				el.style.height = el.scrollHeight + "px";
			}
		}
		handleLeave(el: HTMLElement) {
			if (this.type === "message") {
				// 优化一下，如果当前只有一个 Message，则不使用 js 过渡动画，这样更优美
				if (document.getElementsByClassName("ivu-message-notice").length !== 1) {
					el.style.height = "0";
					el.style.paddingTop = "0";
					el.style.paddingBottom = "0";
				}
			}
		}

		mounted() {
			this.clearCloseTimer();

			if (this.duration !== 0) {
				this.closeTimer = setTimeout(() => {
					this.close();
				}, this.duration * 1000);
			}

			// check if with desc in Notice component
			if (this.prefixCls === "ivu-notice") {
				const desc = (this.$refs.content as any).querySelectorAll(
					`.${this.prefixCls}-desc`
				)[0];
				this.withDesc = this.render ? true : desc ? desc.innerHTML !== "" : false;
			}
		}
		beforeDestroy() {
			this.clearCloseTimer();
		}
	}
</script>
